<template>
  <div class="login">
    <div class="left">

    </div>
    <div class="right">
      <div class="login_con">
        <h1>缠论K线工具</h1>

        <el-form
            ref="formValidateRef"
            :model="formValidate"
            :rules="ruleValidate"
        >
          <el-form-item  prop="mobile">
            <el-input v-model.trim="formValidate.mobile" placeholder="手机号" clearable/>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model.trim="formValidate.password" type="password" placeholder="密码" clearable/>
          </el-form-item>
          <el-form-item  prop="captcha">
            <div class="captcha">
              <el-input v-model.trim="formValidate.captcha" placeholder="验证码"/>
              <img :src="CaptchaUrl" @click.stop="getCaptchaUrl" alt="验证码">
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="width100" :loading="loading" type="primary" @click="handleSubmit(ruleFormRef)">
              登 录
            </el-button>
          </el-form-item>
        </el-form>
        <div class="footer">
          <el-button type="primary" link @click="inputHandle"></el-button>
          <el-button type="danger" link @click="handleRegister">免费注册</el-button>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import {computed, reactive, ref} from 'vue'
import {GET, POST} from "../api";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import apiUrl from "../config/apiUrls";
import {notify} from "../utils/commonScript";
import {getUUID, setCookies} from "../utils";
import {patternUtil} from "../utils/patternUtil";
import CInput from "../c-components/c-input.vue";
import CButton from "../c-components/c-button.vue";

const loading = ref(false)
const store = useStore();
const router = useRouter();
const route = useRoute();
const formValidateRef = ref();
const formValidate = reactive({
  mobile: '',
  password: '',
  captcha: '',
  uuid: '',
});
const ruleValidate = reactive({
  mobile: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: patternUtil.mobile, message: "请输入正确的手机号"}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ],
  captcha: [
    {required: true, message: '请输入验证码', target: 'blur'}
  ]
})
const CaptchaUrl = computed(() => {
  return `${apiUrl.baseUrl}/captcha?uuid=${formValidate.uuid}&t=${new Date().getTime()}`
})
const getCaptchaUrl = () => {
  formValidate.uuid = getUUID()
}
getCaptchaUrl()

const inputHandle = () => {
  loginHandle({
    mobile: '',
    password: '',
    captcha: '',
    uuid:getUUID(),
  })
}
/**
 * 注册
 */
const handleRegister = () => {
  router.push('register')
}

/**
 * 登录
 */
const handleSubmit = () => {
  loginHandle({
    mobile: formValidate.mobile,
    password: formValidate.password,
    captcha: formValidate.captcha,
    uuid: formValidate.uuid,
  }, true)
}
const loginHandle = (params, isLoading = false) => {
  loading.value = isLoading
  POST(apiUrl.login, params).then(res => {
    sessionStorage.setItem('baseInfo', JSON.stringify(res.data.baseInfo))
    setCookies("token", res.data.token);
    router.push({
      path: '/'
    })
  }).finally(() => {
    loading.value = false
  })
}
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  height: 100%;
  .left {
    background: url("../assets/img/bg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 75%;
  }

  .right {
    width: 25%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;

    .login_con {
      width: 100%;
      padding: 20px;
      h1{
        text-align: center;
        margin-bottom: 20px;
        font-size: 30px;
        color: #df1212;
      }
      .captcha{
        display: flex;
        img{
          flex: 1;
          height: 40px;
          margin-left: 10px;
          vertical-align: middle;
          cursor: pointer;
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
      }
    }
  }
}


</style>
